<template>
  <div>
    <van-popup v-model="isOpen" class="skuDialog">
      <div class="title">
        请选择规格
      </div>
      <div class="content">
        <ul class="itemList">
          <li v-for="(item,index) in goodsItem.sku_lists" :key="index" class="item">
            <p class="leftContent">
              <span>{{ item.sku_name }}</span>
              <span>库存量：{{ item.store_num }}</span>
            </p>
            <van-stepper :min="0" :step="1" v-model="item.buyNum" />
          </li>
        </ul>
      </div>
      <div class="checkNum">
        <van-button class="btn" type="danger" size="small" @click="clickToConfirm">确认选择</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isOpen: false,
      goodsItem: [],
      type: undefined
    }
  },
  methods: {
    // 点击确认按钮
    clickToConfirm() {
      this.$toast({
        duration: 1000,
        message: '已添加'
      })
      console.log('点击确认按钮=', this.goodsItem)
      this.isOpen = false
      this.$emit('getDataFromSkuDialog', this.goodsItem)
    }
  }
}
</script>
<style lang="scss">
  @import "src/styles/mixin.scss";
  .skuDialog{
    border-radius: 5px;
    width: 80%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title{
      flex: 1;
      display: flex;
      align-items: center;
      font-size: pxCalc(16px);
      padding-left: pxCalc(20px);
    }
    .content{
      flex: 5;
      overflow-y: scroll;
      .itemList{
        width: 100%;
        padding: 0 pxCalc(15px);
        .item{
          width: 100%;
          height: pxCalc(60px);
          line-height: pxCalc(60px);
          border-bottom: 1px solid #eee;
          display: flex;
          justify-content: space-between;
          .leftContent{
            width: 60%;
            height: 100%;
            display: flex;
            flex-direction: column;
            line-height: 2em;
            justify-content: center;
          }
        }
      }
    }
    .checkNum{
      flex: 1;
      padding-right: pxCalc(20px);
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
</style>
